<template>
	<view>
		<view class="content"></view>
		<view class="" style="position: relative;width: 100%;">
			<image src="../../static/image/yd2.png" class="posi1" mode=""></image>
			<image src="../../static/image/yd1.png" class="posi2" mode=""></image>
		</view>
		<view class="flexcenter">
			<view class="fonweight baixian" style="font-size: 50rpx;color: #33d5a6;">报考信息</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding radius" style="background-color: rgba(255, 255, 255, .6);">
				<view class="iteminput flexbetween ffffff" @click="show1=true">
					<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;width: 400rpx;">
						区域：{{text1}}</view>
					<u-icon name="arrow-down" color="#33d5a6" size="20"></u-icon>
				</view>
				<view class="iteminput margin_top flexbetween ffffff" @click="show2=true">
					<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;width: 400rpx;">
						院校：{{text2}}</view>
					<u-icon name="arrow-down" color="#33d5a6" size="20"></u-icon>
				</view>
				<view class="iteminput margin_top flexbetween ffffff" @click="show3=true">
					<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;width: 400rpx;">
						学院：{{text3}}</view>
					<u-icon name="arrow-down" color="#33d5a6" size="20"></u-icon>
				</view>
				<view class="iteminput margin_top flexbetween ffffff" @click="show4=true">
					<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;width: 400rpx;">
						专业：{{text4}}</view>
					<u-icon name="arrow-down" color="#33d5a6" size="20"></u-icon>
				</view>
				<view class="iteminput margin_top flexbetween ffffff" @click="show5=true">
					<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;width: 400rpx;">
						方向：{{text5}}</view>
					<u-icon name="arrow-down" color="#33d5a6" size="20"></u-icon>
				</view>
			</view>
		</view>
		<template v-if="xkList.length">
			<view class="flexcenter margin_top6">
				<view class="fonweight baixian" style="font-size: 50rpx;color: #33d5a6;">考试成绩</view>
			</view>
			<view class="mainpadding">
				<view class="mainpadding radius" style="background-color: rgba(255, 255, 255, .6);">
					<view class="iteminput  flexbetween ffffff" :class="index==0?'':'margin_top'" v-for="(item,index) in xkList" :key="item.id">
						<view class="fonweight baixian sanshier xiankuan" style="color: #33d5a6;min-width:400rpx;">{{item.name}}
						</view>
						<input type="digit" placeholder="输入成绩" v-model="item.score"/>
					</view>
				</view>
			</view>
		</template>
		<view class="flexcenter margin_top6">
			<view class="fonweight baixian" style="font-size: 50rpx;color: #33d5a6;">认证信息</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding radius" style="background-color: rgba(255, 255, 255, .6);">
				<view class="iteminput flexleft ffffff">
					<view class="fonweight baixian sanshier" style="color: #33d5a6;">姓名：</view>
					<input type="text" placeholder="请输入真实姓名" v-model="username">
				</view>
				<view class="iteminput margin_top flexleft ffffff">
					<view class="fonweight baixian sanshier" style="color: #33d5a6;">QQ：</view>
					<input type="number" placeholder="请输入QQ号" v-model="qq">
				</view>
				<view class="iteminput margin_top flexleft ffffff">
					<view class="fonweight baixian sanshier" style="color: #33d5a6;">手机号：</view>
					<input type="number" placeholder="请输入手机号" v-model="zkzno">
				</view>
				<view class="iteminput margin_top flexbetween ffffff">
					<view class="flexleft">
						<view class="fonweight baixian sanshier" style="color: #33d5a6;">验证码：</view>
						<input type="number" style="width: 200rpx;" placeholder="" v-model="yzm_code">
					</view>
					<view class="xiaocheng xiaohuang textcenter" style="width: 240rpx;" @click="sendyzm"
						v-show="codetext == 1">获取验证码</view>
					<view class="xiaocheng xiaohuang textcenter" style="width: 240rpx;" v-show="codetext == 2">
						{{second}}s后重新获取</view>
					<view class="xiaocheng xiaohuang textcenter" style="width: 240rpx;" @click="sendyzm"
						v-show="codetext == 3">重新发送</view>
				</view>
				<view class="iteminput margin_top ffffff">
					<view class="flexbetween" @click="uploadImg">
						<view class="fonweight baixian sanshier" style="color: #33d5a6;">上传成绩单</view>
						<u-icon name="plus-circle" color="#33d5a6" size="20"></u-icon>
					</view>
					<image :src="image_text" v-show="image_text" class="margin_top" style="width: 100%;" mode="widthFix"></image>
				</view>
				<view class="mainpadding xiaohong smalltext">
					<u-parse :content="systemInfo.submit_des"></u-parse>
					<!-- <view class="">{{systemInfo.submit_des}}</view> -->
				</view>
			</view>
			<view class="bigbtn margin_top" @click="submit">提交</view>
		</view>
		<u-picker :show="show1" :columns="columns1" keyName="name" @confirm="confirm1" @cancel="show1=false"></u-picker>
		<u-picker :show="show2" :columns="columns2" keyName="name" @confirm="confirm2" @cancel="show2=false"></u-picker>
		<u-picker :show="show3" :columns="columns3" keyName="name" @confirm="confirm3" @cancel="show3=false"></u-picker>
		<u-picker :show="show4" :columns="columns4" keyName="name" @confirm="confirm4" @cancel="show4=false"></u-picker>
		<u-picker :show="show5" :columns="columns5" keyName="name" @confirm="confirm5" @cancel="show5=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				show5:false,
				columns1:[],
				columns2:[],
				columns3:[],
				columns4:[],
				columns5:[],
				text1:"",
				text2:"",
				text3:"",
				text4:"",
				text5:"",
				id1:"",
				id2:"",
				id3:"",
				id4:"",
				id5:"",
				xkList:[],
				systemInfo:{},
				username:"",
				qq:"",
				image:"",
				image_text:"",
				zkzno:"",
				codetext: 1,
				second: 59,
				yzm_code: '',
			}
		},
		onLoad() {
			this.init1()
			this.system()
		},
		methods: {
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			//发送验证码
			sendyzm() {
				let _this = this;
				if (_this.zkzno == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if (!_this.isMobile(_this.zkzno)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function() {
					if (_this.second > 1) {
						_this.second--;
					} else {
						clearInterval(timer);
						_this.codetext = 3;
					}
				}, 1000)
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.zkzno,
					event: 'bmyz',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						httpRequest.toast('发送成功')
					}
				})
			},
			submit(){
				if(this.text1=="" || this.text2=="" || this.text3=="" || this.text4=="" || this.text5==""){
					httpRequest.toast("请将信息填写完整后提交！")
					return false
				}
				let cjcontent = []
				for(let i=0; i<this.xkList.length;i++){
					let item = this.xkList[i]
					if(item.score===""){
						httpRequest.toast("请填写"+item.name+"的分数")
						return false
					}
					cjcontent.push({
						school_xy_zy_fx_xk_id:item.id,
						score:item.score,
					})
				}
				if(this.username=="" || this.qq==""){
					httpRequest.toast("请将信息填写完整后提交！")
					return false
				}
				if(this.zkzno==""){
					httpRequest.toast("请输入手机号！")
					return false
				}
				if(this.image==""){
					httpRequest.toast("请输入验证码！")
					return false
				}
				if(this.image==""){
					httpRequest.toast("请上传成绩单！")
					return false
				}
				httpRequest.request('/api/schoolcl/submitRecord', 'POST', {
					school_xy_zy_fx_id:this.id5,
					cjcontent,
					username:this.username,
					qq:this.qq,
					image:this.image,
					zkzno:this.zkzno,
					code:this.yzm_code
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			uploadImg(value, upImgs,upImgs_text) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs,upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs,upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg,upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.image = res.url;
					this.image_text = image_item
				}).catch(err => {});
			},
			init1() {
				httpRequest.request('/api/schoolcl/areaIndex', 'GET', {}).then(res => {
					this.columns1 = []
					this.columns1.push(res.data)
				})
			},
			init2() {
				httpRequest.request('/api/schoolcl/schoolIndex', 'GET', {
					province_id:this.id1
				}).then(res => {
					this.columns2 = []
					this.columns2.push(res.data)
				})
			},
			init3() {
				httpRequest.request('/api/schoolcl/schoolXyIndex', 'GET', {
					school_id:this.id2
				}).then(res => {
					this.columns3 = []
					this.columns3.push(res.data)
				})
			},
			init4() {
				httpRequest.request('/api/schoolcl/schoolXyZyIndex', 'GET', {
					school_xy_id:this.id3
				}).then(res => {
					this.columns4 = []
					this.columns4.push(res.data)
				})
			},
			init5() {
				httpRequest.request('/api/schoolcl/schoolXyZyFxIndex', 'GET', {
					school_xy_zy_id:this.id4
				}).then(res => {
					this.columns5 = []
					this.columns5.push(res.data)
				})
			},
			init6() {
				httpRequest.request('/api/schoolcl/schoolXyZyFxXkIndex', 'GET', {
					school_xy_zy_fx_id:this.id5
				}).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"score","")
					})
					this.xkList = res.data
				})
			},
			confirm1(e){
				this.show1 = false
				if(this.id1!=e.value[0].id){
					this.text1 = e.value[0].name
					this.text2 = ""
					this.text3 = ""
					this.text4 = ""
					this.text5 = ""
					this.id1 = e.value[0].id
					this.id2 = ""
					this.id3 = ""
					this.id4 = ""
					this.id5 = ""
					this.xkList = []
					this.columns2 = []
					this.columns3 = []
					this.columns4 = []
					this.columns5 = []
					this.init2()
				}
			},
			confirm2(e){
				this.show2 = false
				if(this.id2!=e.value[0].id){
					this.text2 = e.value[0].name
					this.text3 = ""
					this.text4 = ""
					this.text5 = ""
					this.id2 = e.value[0].id
					this.id3 = ""
					this.id4 = ""
					this.id5 = ""
					this.xkList = []
					this.columns3 = []
					this.columns4 = []
					this.columns5 = []
					this.init3()
				}
			},
			confirm3(e){
				this.show3 = false
				if(this.id3!=e.value[0].id){
					this.text3 = e.value[0].name
					this.text4 = ""
					this.text5 = ""
					this.id3 = e.value[0].id
					this.id4 = ""
					this.id5 = ""
					this.xkList = []
					this.columns4 = []
					this.columns5 = []
					this.init4()
				}
			},
			confirm4(e){
				this.show4 = false
				if(this.id4!=e.value[0].id){
					this.text4 = e.value[0].name
					this.text5 = ""
					this.id4 = e.value[0].id
					this.id5 = ""
					this.xkList = []
					this.columns5 = []
					this.init5()
				}
			},
			confirm5(e){
				this.show5 = false
				if(this.id5!=e.value[0].id){
					this.text5 = e.value[0].name
					this.id5 = e.value[0].id
					this.xkList = []
					this.init6()
				}
			},
			system() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {
				}).then(res => {
					this.systemInfo = res.data
				})
			},
		}
	}
</script>

<style>
	.baixian {
		text-shadow: -3px 0 rgba(255, 255, 255, 1), 0 3px rgba(255, 255, 255, 1), 3px 0 rgba(255, 255, 255, 1), 0 -3px rgba(255, 255, 255, 1);
	}

	.iteminput {
		padding: 15rpx 30rpx;
		border: 5rpx solid #33d5a6;
		border-radius: 50rpx;
	}

	.content {
		background-image: url("@/static/image/bg.jpg");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.posi1 {
		position: absolute;
		right: -120rpx;
		width: 400rpx;
		height: 400rpx;
	}

	.posi2 {
		position: relative;
		right: 100rpx;
		width: 400rpx;
		height: 400rpx;
	}
</style>